<script setup lang="ts">
import { ref, watch, onActivated } from "vue";
import { useECharts } from "@pureadmin/utils";
import { chartInfo } from "../interface";

const props = withDefaults(defineProps<chartInfo>(), {
  title: "",
  legend: () => ["平均响应时间(s)"],
  xAxisSetting: () => ({}),
  yAxisData: () => ["基准处理方法", "优化处理方法"],
  seriesData: () => [5.2, 2.5]
});

const chartRef = ref<any>();

const { setOptions, resize } = useECharts(chartRef, {});

const render = () =>
  setOptions({
    color: ["rgb(12, 120, 225)"],
    title: {
      text: props.title,
      top: "5%",
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      right: "15%",
      icon: "roundRect",
      top: "5%",
      data: props.legend,
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      top: "20%",
      left: "0%",
      right: "10%",
      bottom: "10%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      ...props.xAxisSetting
    },
    yAxis: {
      axisTick: {
        show: false
      },
      type: "category",
      data: props.yAxisData
    },
    series: [
      {
        type: "bar",
        barWidth: "30%",
        data: props.seriesData
      }
    ]
  });
render();
watch(props, newProps => {
  render();
});

onActivated(() => {
  resize();
});
</script>

<template>
  <div ref="chartRef" style="width: 100%" />
</template>
